<!-- 
5. 根组件App.vue是整个应用的顶层组件
这里使用了Vue Router提供的两个特殊组件：
- RouterLink：用于创建导航链接
- RouterView：用于显示匹配路由的组件内容
-->
<template>
    <h1>Hello App!</h1>

    <p>
        <!-- 
        6. 使用$route访问当前路由信息
        $route是Vue Router注入的全局对象，包含当前路由的所有信息
        fullPath属性显示完整的URL路径
        -->
        <strong>当前路由路径：</strong> {{ $route.fullPath }}
    </p>

    <nav>
        <!-- 
        7. RouterLink组件用法
        - to属性：指定导航的目标路径
        - 它会被渲染为<a>标签，【但Vue Router会接管点击事件】
        - 点击后，页面不会整体刷新，只更新需要变化的部分（这叫做SPA - 单页应用）
        -->
        <RouterLink to="/">回家</RouterLink>
        <span> | </span>
        <RouterLink to="/about">去关于</RouterLink>
    </nav>

    <main>
        <!-- 
        8. RouterView组件
        - 这是一个占位符，会显示当前URL匹配的路由组件
        - 路由变化时，这里的内容会自动更新为对应的组件
        - 比如访问/时显示HomeView，访问/about时显示AboutView
        -->
        <RouterView />
    </main>
</template>